<template>
    <div>
        <basic-container>
        <div>
            <div>
                <div style="margin-bottom: 10px;">
                    <el-button type="primary" @click="newBtn">新增</el-button>
                </div>
                <el-table :data="nameTableData" v-loading="loadingFrom">
                    <el-table-column prop="templateName" label="模板名称" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                    <el-table-column prop="createUserName" label="创建人" align="center"></el-table-column>
                    <el-table-column prop="isEffective" label="有效性" align="center">
                        <template slot-scope="scope">
                            <i v-if="scope.row.isEffective == 1" style="color: green;" class="el-icon-circle-check"></i>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200px" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="delBtn(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog
                :title="dialogtitle"
                :visible.sync="mbstepsDialogVisible"
                width="80%"
                >
                <div>
                    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px" style="display:flex" :inline="true">
                        <el-form-item label="模板名称" prop="templateName">
                            <el-input v-model="ruleForm.templateName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" plain @click="submitForm('ruleForm')">确定</el-button>
                        </el-form-item>
                    </el-form>
                    <div style="display: block;margin-top: -54px;float: right;">
                        <el-button type="primary" plain @click="saveBtn" v-if="tableData.length>1" v-loading.fullscreen.lock="fullscreenLoading2">模板保存</el-button>
                    </div>

                </div>
                <div v-loading="loading">
                    <div class="tiao_lc"  style="margin-bottom: 20px;" v-if="tableData.length>1">流程图</div>
                    <div class="bg_tiao" v-if="tableData.length>1"></div>
                    <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;" v-if="tableData.length>1">
                        <div class="text_dh">
                            <div style="color:#0762c3;margin:0 45px">开始</div>
                            <img class="imgs" src="./start.png" alt="" @click="editmbsteps('该节点无配置')">
                        </div>
                        <div class="text_dh">
                            <div style="color:#0762c3;margin:0 27px">发放提审</div>
                            <div class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
                        </div>
                        <div class="text_dh">
                            <div style="color:#0762c3;margin:0 27px">领导串行审批</div>
                            <div class="chenck_active2"  @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked"></i></div>
                        </div>
                        <div class="text_dh" >
                          <div style="color:#0762c3;margin:0 27px">发放调整</div>
                          <div class="chenck_active2"  @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked"></i></div>
                        </div>
                        <div class="text_dh">
                            <div style="color:#0762c3;margin:0 45px;">结束</div>
                            <img class="imgs" src="./end.png" alt="" @click="editmbsteps('该节点无配置')">
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>
        </basic-container>
        <sortingPerChooseDialog
            :sortingPerChooseDialogData="sortingPerChooseDialogData"
            @sortingPerChooseDialogChild="sortingPerChooseDialogChild"
        ></sortingPerChooseDialog>
    </div>
</template>
<script>
import {getTempListForZdrw,tempage,saveTemplateName,isExsitTemplateName,saveTemplatehang,effective,deleteBatchtem} from "@/api/jiangjin/jiangjinAct.js";
import sortingPerChooseDialog from '@/views/hetongrenwu/components/sortingPerChooseDialog.vue'
export default {
    components: {
        sortingPerChooseDialog
    },
    data(){
        return{
            nameTableData:[],
            tableData:[],
            perList:[],
            ruleForm:{
                templateName:"",
            },
            sortingPerChooseDialogData:{},
            loading:false,
            options:[
                {label:'是',value:"1"},
                {label:'否',value:"0"},
            ],
            id:"",
            from1:{},
            from2:{},
            from3:{},
            from4:{},
            from5:{},
            from6:{},
            from7:{},
            from8:{},
            rules:{
                 templateName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
            },
            checked:false,
            showType:"",
            mbstepsDialogVisible:false,
            dialogtitle:"",
            fullscreenLoading2:false,
            loading:false
        }
    },
    watch:{

    },
    created(){
        this.getemNameList();
        this.from1 = {};
        this.from2 = {};
        this.from3 = {};
        this.from4 = {};
        this.from5 = {};
        this.from6 = {};
        this.from7 = {};
        this.from8 = {};
        this.id = "";
    },
    methods:{
        newBtn(){
            this.dialogtitle = "新增"
            this.tableData = [];
            this.id = "";
            this.from1 = {};
            this.from2 = {};
            this.from3 = {};
            this.from4 = {};
            this.from5 = {};
            this.from6 = {};
            this.from7 = {};
            this.from8 = {};
            this.ruleForm = {};
            this.mbstepsDialogVisible = true;
            this.showType = "";
        },
        // 节点编辑
        editmbsteps(e){
            this.showType = e;
            if(e == '考核委员会审定'){
                this.perList = JSON.parse(this.from4.userjson).reverse()
            }else if(e == '其他奖惩审定'){
                this.perList = JSON.parse(this.from8.userjson).reverse()
            }
        },
        valueChange(e){
            var row = {};
            if(e.stepName == '任务填报及审核'){
                row = this.from1;
            }else if(e.stepName == '汇总'){
                row = this.from2;
            }else if(e.stepName == '被考核人员确认'){
                row = this.from3;
            }else if(e.stepName == '考核委员会审定'){
                if(!e.isjump){
                    this.showType = "该节点无配置"
                }else{
                    this.showType = "考核委员会审定"
                }
                row = this.from4;
            }else if(e.stepName == '绩效考核办公室修改下达'){
                row = this.from5;
            }else if(e.stepName == '发起填报'){
                row = this.from6;
            }else if(e.stepName == '结果汇总'){
                row = this.from7;
            }else if(e.stepName == '其他奖惩审定'){
                row = this.from8;
            }
            if(row.isjump == false){
                row.isjump = true;
            }else{
                row.isjump = false;
            }
            this.savetem(row)
        },
        savetem(row){
            saveTemplatehang(row).then((res)=>{
                this.$message.closeAll();
                this.$message.success(row.stepName + '保存成功');
                this.fngetTempList()
            }).catch(res=>{
            })
        },
        // 新增模板
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    isExsitTemplateName({
                        templateName:this.ruleForm.templateName,
                        tagName:"奖金"
                    }).then((res)=>{
                        this.$message.closeAll()
                    if(!res.data.data.flag){
                        saveTemplateName({
                            templateName:this.ruleForm.templateName,
                            id:this.id,
                            tagName:"奖金"
                        }).then((res)=>{
                            this.id = res.data.data.id;
                            this.fngetTempList(res.data.data);
                            this.getemNameList();
                        })
                    }else{
                        this.$message.warning("模板名称已存在")
                    }
                })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //获取模板列表
        getemNameList(){
            this.loadingFrom = true;
            tempage({
                tagName:"奖金"
            }).then((res)=>{
                this.loadingFrom = false;
                this.nameTableData = res.data.data.records;
                this.showType = "请点击节点进行配置"
            })
        },
        // 模板提交至有效
        saveBtn(){
            var params = {
                isEffective:1,
                id:this.id,
                tagName:"奖金"
            }

            this.fullscreenLoading2 = true;
            saveTemplateName(params).then((res)=>{
                this.$message.closeAll()
                this.$message.success('提交成功');
                this.fullscreenLoading2 = false;
                this.getemNameList();
                this.mbstepsDialogVisible = false;
            }).catch(res=>{
                this.fullscreenLoading2 = false;
            })

        },
        edit(row){
            this.dialogtitle = row.templateName;
            this.ruleForm.templateName = row.templateName
            this.id = row.id;
            this.showType = "请点击节点进行配置";
            this.fngetTempList();
        },
        // 编辑
        fngetTempList(){
            var params ={
                mainId:this.id
            }
            this.loading = true;
            getTempListForZdrw(params).then((res)=>{
                this.tableData = res.data.data;
                this.from1 = res.data.data[0];
                if(this.from1.isjump == 'false'){
                    this.from1.isjump = true;
                }else{
                    this.from1.isjump = false;
                }
                this.from2 = res.data.data[1];
                this.from3 = res.data.data[2];
                if(this.from3.isjump == 'false'){
                    this.from3.isjump = true
                }else{
                    this.from3.isjump = false;
                }
                this.from4 = res.data.data[3];
                if(this.from4.isjump == 'false'){
                    this.from4.isjump = true;
                }else{
                    this.from4.isjump = false;
                }
                console.log(this.from4.isjump,this.from3.isjump)
                this.from5 = res.data.data[4];
                this.from6 = res.data.data[5];
                this.from7 = res.data.data[6];
                this.from8 = res.data.data[7];
                this.mbstepsDialogVisible = true;
                this.loading = false;
            }).catch(()=>{
                this.loading = false;
            })
        },
        delBtn(row){
            var params = {
                ids:row.id
            }
            this.$confirm('确定要删除么？', "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(_ => {
                    deleteBatchtem(params).then((res)=>{
                        this.$message.closeAll()
                        this.$message.success('删除成功');
                        this.getemNameList()
                    })
                }).catch(_ => {
                });
        },
        choosePer(row){
            console.log(row)
            this.sortingPerChooseDialogData = {
                visible:true,
                rows:row,
                perLsit:JSON.parse(row.userjson).reverse(),
                types:"temper"
            }
        },
        sortingPerChooseDialogChild(res){
            this.fngetTempList();
            this.editmbsteps(this.showType)
        }
    }

}
</script>
<style>
.tiao_lc{
    width: 100%;
    background: #eeeeee;
    padding: 10px;
    color:#0762c3;
    display: flex;
    justify-content: space-between;
}
.text_dh{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.zdrw_bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 230px;
}
.bg_tiao{
    width: 100%;
    background: #a9c6ea;
    height: 4px;
    top: 45px;
    position: relative;
    z-index: 2;
}
.bg_tiao2{
    width: 100%;
    background: #a9c6ea;
    height: 4px;
    top: 65px;
    position: relative;
    z-index: 2;
}
.point{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #dbe2f2;
    box-shadow: 4px 4px 6px #888888;
}
.chenck_active{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #0a66c2;
    box-shadow: 4px 4px 6px #888888;
    text-align: center;
}
.chenck_active2{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 4px 4px 6px #888888;
    text-align: center;
}
.imgs{
    width: 31px;
    height: 31px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 4px 4px 6px #888888;
}
.checked{
    font-size:20px;
    border-radius: 50%;
    color: #0a66c2;
    line-height: 31px;
    background:#fff;
}
.checked2{
    color:#fff;
    font-size:20px;
    line-height: 31px;
    text-align: center;
    background: #0a66c2;
    border-radius: 50%;
}
.per{
    width: 80%;
    height: 84px;
    border-radius: 5px;
    border: 2px #ededf1 solid;
    padding: 20px;
}
</style>
